<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>danmu app</title>
    <link rel="stylesheet" type="text/css" href="../common/css/test.css">
    <script type="text/javascript" src="../common/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../message/js/jquery.barrager.js"></script>
    <script type="text/javascript" src="../config/config.js"></script>
    <script type="application/javascript">
        $(document).ready(function () {
            var ws = null;

            $("#exit").click(function () {
                $("#content").html("");
                if (null != ws) {
                    ws.close();
                    ws = null;
                }
                $("#start").show();
                $(this).hide();
            });

            $("#start").click(function () {
                $("#content").html("");
                if (null == ws) {
                    startServer();
                }
                $("#exit").show();
                $(this).hide();
            });

            function startServer() {
                var url = "ws://" + BASE + "echoServlet";
                if ('WebSocket' in window) {
                    ws = new WebSocket(url);
                } else if ('MozWebSocket' in window) {
                    ws = new MozWebSocket(url);
                } else {
                    alert('Your browser Unsupported WebSocket!');
                    return;
                }
                ws.onopen = function () {
                    document.getElementById("content").innerHTML += '弹幕通道已开启! Welcome!<br />';
                };
                ws.onmessage = function (event) {
                    if (event && event.data) {
                        var contentMessage = $.parseJSON(event.data);
                        var array = [];
                        var content = {
                            msg: contentMessage.content,
                            img: contentMessage.headImgUrl
                        };
                        array.push(content);
                        $('canvas').barrager(array);
                    }
                };
                ws.onclose = function () {
                    document.getElementById("content").innerHTML += '弹幕通道关闭! Byebye!<br />';
                };
            }
            startServer();
        });
    </script>
</head>
<body>
<div>

    <h1 id="content" style="text-align: center;color:#3498ed"></h1>
    <button id="exit" style="position: absolute;top: 0;right: 0;z-index: 1000;background-color: transparent">关闭弹幕通道</button>
    <button id="start" style="position: absolute;z-index: 1000;top:0;right:100px;background-color: transparent">开启弹幕通道</button>
    <canvas style="width: 100%;height: 100%;background-color: rgba(255,255,255,0.1);position: absolute;top: 0;left: 0">
        你的浏览器不支持canvas
    </canvas>
</div>
</body>
</html>